<!-- 右边图标跳转 页面 -->
<template>
	<view class="">
		
		<view class=" margin-top_30rpx">
			<sunui-navbar :items="tabList" lineHeight="60rpx" :isCenter="true" :currentIndex="tabIndex" padding="1rpx"
				:size="130" activeLineBg="#FF0000" textAlign="center" activeColor="#333333" activeLineWidth="45%"
				activeDirection="center" activeLineHeight="8rpx" :margin="1" @change="getChange"></sunui-navbar>
		</view>
		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="orderList " v-for="(item,index) in orderList" :key="index">
				<view class="flex-between">
					<view :class="item.is_status==1?'font-overflow width50':'' ">
						订单号：{{item.log_no}}
					</view>
					<view class="flex" style="color: #FF0000;">
						{{orderStatusFn(item.is_status)}} <text style="margin-left: 10rpx;"
							v-if="item.is_status==1">剩余:</text> <uni-countdown v-if="item.is_status==1" color="#FF0000"
							:show-day="false" :hour="item.refundTime.hours" :minute="item.refundTime.minutes"
							:second="item.refundTime.seconds" />
					</view>
				</view>

				<view class="v-shop-cart margin-top_30rpx">
					<view class="flex-align-center">
						<!-- <image class="border10" :src="detailList.foods_img"></image> -->
						<image class="border10" :src="item.pic_url">
						</image>
						<view class="flex-columns v-content flex1" style="height: 148rpx;">
							<view class="flex-between">
								<!-- <view class="v-name">{{ detailList.foods_name }}</view> -->
								<view class="v-name">{{item.goods_name}}</view>
							</view>
							<!-- 需修改样式‘上下底部对齐’ -->
							<!-- <text v-if="detailList.service_desc">周期服务：{{ detailList.service_desc }}</text> -->
							<view style="color: #888888;">规格：{{item.spec_name?item.spec_name:'无'}}</view>
							<view class="flex-start-center" v-if="item.is_status==6">
								<view class="v-price margin-right_30rpx">已退款:￥{{item.money}}</view>

							</view>
							<view class="flex-start-center" v-else>
								<view class="v-price margin-right_30rpx">实付价格:￥{{item.money}}</view>
							
							</view>
						</view>
					</view>
				</view>
				<view class="flex-between margin-top_40rpx padding-bottom_30rpx " :class="item.invoice_data.is_status==3?'border-bottom-ECECEC':''">
					<view class="flex-start-center ">
						<!-- <view class="flex-start-center">
						<view class="flex-between v-p-share">
							<view class="v-m-width not-font-overflow flex1">
								<block v-for="(img, index) in imgList" :key="index">
									<image v-if="index<3" class="pt_img" :src="img"></image>
								</block>
				
							</view>
				
						</view>
				
				
					</view>
					<text class="font-size_40rpx">...</text> -->
					</view>
					<view class=" flex-between ">
						<view class="gay-whiteBtn flex margin-right_16rpx" v-if="item.is_status==1"
							@click="cancelOrder(item.id)">
							取消订单
						</view>
						<view class="red-whiteBtn flex margin-right_16rpx"
							v-if="(item.is_status==2||item.is_status==4)&&item.need_invoice==1&&item.is_invoice==0"
							@click="issueInvoice(item.id)">
							开发票
						</view>
						<view class="red-whiteBtn flex margin-right_16rpx"
							v-if="(item.is_status==2||item.is_status==4)&&item.need_invoice==1&&item.is_invoice==1&&item.invoice_data.is_status==1"
							>
							发票审核中
						</view>
						<view class="red-whiteBtn flex margin-right_16rpx" @click="issueInvoice(item.id)"
							v-if="(item.is_status==2||item.is_status==4)&&item.need_invoice==1&&item.is_invoice==1&&item.invoice_data.is_status==3"
							>
							发票已驳回
						</view>
						<view class="red-whiteBtn flex margin-right_16rpx" v-if="item.is_status==5&&item.is_invoice==1"
							@click="viewInvoice(item.invoice_data)">
							查看发票
						</view>
						<view class="gay-whiteBtn flex margin-right_16rpx"
							v-if="item.is_status==0||item.is_status==2||item.is_status==4||item.is_status==5"
							@click="viewDetail(item.id)">
							查看详情
						</view>
						<view class="red-whiteBtn flex" v-if="item.is_status==1"
							@click="confirm(item.spec_name,item.goods_id,item.id,item)">
							立即付款
						</view>
					</view>
					
				</view>
				<view class="margin-top_30rpx"  v-if="item.invoice_data.reason&&item.invoice_data.is_status==3">
					<text style="color: #FF0000;">驳回原因：</text><text>{{item.invoice_data.reason}}</text>
					
				</view>


			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import antiThrottling from '@/utils/antiThrottling.js';
	export default {
		data() {
			return {
				detailInfo: {},
				moneyItem: {},
				numberBox: '',
				order_id: '',
				activitType: 0,
				imgList: [
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
				],
				currentIndex: 0,
				tabIndex: '',
				orderList: [],
				itemAll: '',
				is_status: '',
				tabSwitchList: [{
						id: 0,
						tabName: '拼团订单'

					},
					{
						id: 1,
						tabName: '秒杀订单'

					},
					{
						id: 2,
						tabName: '砍价订单'

					},
					{
						id: 2,
						tabName: '众筹订单'

					}
				],
				tabList: [{
						name: '全部',
						id: ''
					}, {
						name: '已取消',
						id: 0
					}, {
						name: '待付款',
						id: 1
					},
					{
						name: '已完成',
						id: 2,

					},
					{
						name: '评价',
						id: 4,

					},
					{
						name: '已开票',
						id: 5,

					},
					{
						name: '已退款',
						id: 6,
					
					},

				],
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.tabOrder) {

				this.tabIndex = options.tabOrder
				this.getChange(this.tabIndex)

			}

		},
		onPageScroll(ev) {



		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {
			// 订单状态
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '已取消' : status == 1 ? '待付款' : status == 2 ? '已完成' : status == 4 ? '已评价'  : status == 5?'已开票':'已退款';

					return orderStatus;
				};
			},
		},
		methods: {
			viewInvoice(data) {
				console.log(data.pic_url)
				if (data.pic_url) {
					this.$sun.navGo('/pages/detail/viewInvoice', {
						fpUrl: data.pic_url
					});
					

				} else {
					this.$sun.toast('当前未开发票', 'none')
				}
			},
			async orderDetailFn(order_id, item) {
				const result = await this.$http.get({
					url: this.$api.orderDetail,
					data: {
						// 订单id
						order_id: order_id,
						uid: uni.getStorageSync('uid'),
					}
				});
				if (result.errno == 0) {
					this.numberBox = result.data.count

					antiThrottling.uniDoFunc({
						// 键名
						key: 'submit',
						success: async () => {
							//锁定
							antiThrottling.lockKey('submit');

							

							console.log('111')
							this.addOrders(item)

						}
					});

					// setTimeout(() => {
					// 	this.$sun.navGo('/pages/confirmOrder/confirmOrder');
					// }, 500)
				}
			},
			// 购买产品
			async addOrders(item) {


				this.pays(item)

				// const result = await this.$http.post({
				// 	url: this.$api.orderAdd,
				// 	data: {

				// 		use_integral: item.use_integral,


				// 		uid: uni.getStorageSync('uid'),
				// 		// 产品id
				// 		goods_id: item.goods_id,


				// 		// 规格id
				// 		spec_id: item.spec_id ? item.spec_id : '',

				// 		// 商品数量
				// 		count: item.count,

				// 		// 备注
				// 		remark: item.remark,

				// 		// 是否需要开发票 1.不需要 2 需要
				// 		need_invoice: item.need_invoice,
				// 		// 联系人
				// 		contacts: item.contacts,

				// 	}
				// });
				// if (result.errno == 0) {
				// 	this.itemAll = result.data;
				// 	console.log(this.itemAll)

				// 	this.applyOrder(this.itemAll, item);
				// } else {
				// 	this.$sun.toast(result.message);
				// 	antiThrottling.releaseKey('submit');
				// }
				// this.$sun.navRe('/pages/orderMessage/orderDetail/orderDetail');
			},
			applyOrder(number, item) {
				this.pays(this.itemAll, item);
			},

			// 进行支付
			// 支付
			async pays( item) {
				console.log(item)
				const result = await this.$http.get({
					url: this.$api.wxPay,
					data: {

						// 支付金额
						price: item.money,
						// 订单编号
						log_no: item.log_no,
						// opid
						openid: wx.getStorageSync('user').openid,

						name: item.goods_name ? item.goods_name : ''
					}
				});
				if (result.errno == 0) {
					this.$sun.title('支付');
					const pay = result.data;
					this.$sun.wePay(
						pay,
						async success => {
								this.getChange(3)
								// uni.setStorageSync('use_integral', use_integral);
								antiThrottling.releaseKey('submit');



							},
							async cancel => {
								this.getChange(2)
								antiThrottling.releaseKey('submit');

							}
					);
				} else {
					this.$sun.toast(result.message);
					antiThrottling.releaseKey('submit');
				}
			},



			// 单个产品详情
			async getDetail(spec_name, goods_id, order_id, item) {
				const result = await this.$http.get({
					url: this.$api.goodsDetail,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 产品id
						goods_id: goods_id,

					}
				});
				if (result.errno == 0) {
					this.detailInfo = result.data;
					console.log(this.detailInfo)
					// 选择规格


					this.moneyItem = this.detailInfo.spec.find(item => item.name == spec_name);

					this.orderDetailFn(order_id, item)

				}
			},
			// 规格确定
			confirm(spec_name, goods_id, order_id, item) {
				this.getDetail(spec_name, goods_id, order_id,item)


				// this.$sun.navGo('/pages/confirmOrder/confirmOrder');
			},
			//取消订单
			async cancelOrder(order_id) {

				uni.showModal({
					title: '提示',
					content: '是否删除取消订单',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.get({
								url: this.$api.orderCancel,
								data: {
									// 用户id
									uid: uni.getStorageSync('uid'),
									order_id: order_id


								},


							})
							if (result.errno == 0) {
								this.$sun.toast(result.message, 'none')

								console.log()
								setTimeout(() => {
									this.getChange(1)
								}, 500)
							} else {

								this.$sun.toast(result.message, 'none')
							}
						} else if (res.cancel) {

						}
					}
				});

			},
			issueInvoice(id) {

				this.$sun.navGo('/pages/confirmOrder/issueInvoice', {
					orderId: id,
					type: 1
				});
			},



			viewDetail(id) {
				this.$sun.navGo('/pages/orderMessage/orderDetail/orderDetail', {
					orderId: id,
					type: 1
				});
			},
			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},
			// 我的订单
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.orderList,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,
						is_status: this.is_status,


					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.orderList = [];
					this.orderList = this.orderList.concat(result.data.list);

					this.orderList.forEach((item) => {
						if (item.is_status == 1) {
							item.refundTime = this.formatTimeDifference(item.end_time)
						}

					})
					console.log()

					// if (this.distributionSet.distribution_level != 0) {
					// 	this.getChange2(0);
					// }
				}
			},
			
			getChange(index) {


				this.tabIndex = index;
				this.is_status = index == 0 ? '' : index == 1 ? 0 : index == 2 ? 1 : index == 3 ? 2 : index;
				console.log(index, this.is_status)
				this.mescroll.resetUpScroll();
			},
		}
	};
</script>

<style lang="less">
	.orderList {
		padding: 30rpx;

		border-radius: 20rpx;
		margin: 0 25rpx;
		background: rgb(255, 255, 255);
		margin-top: 30rpx;
	}

	.red-whiteBtn {
		box-sizing: border-box;
		border: 2rpx solid rgb(255, 0, 0);
		border-radius: 192rpx;
		width: 160rpx;
		height: 70rpx;
		background: rgb(255, 255, 255);
		color: #FF0000;
	}

	.gay-whiteBtn {
		box-sizing: border-box;
		// border: 2rpx solid rgb(244, 244, 244);
		border-radius: 192rpx;
		width: 152rpx;
		height: 70rpx;
		color: #000000;
		background: rgb(255, 255, 255);
	}

	.v-p-share {
		padding: 2rpx 2rpx 0 2rpx;

		.v-m-width {
			margin-right: 20rpx;

			.pt_img {
				width: 50rpx;
				height: 50rpx;
				margin-right: -20rpx;
				border-radius: 50%;
			}
		}

		.v-share-friend {
			text {
				color: #294d7d;
				font-size: 24rpx;
				padding-right: 50rpx;
			}

			view {
				color: #ffffff;
				width: 154rpx;
				height: 58rpx;
			}
		}

		.v-share-friend2 {
			text {
				color: #294d7d;
				font-size: 24rpx;
			}
		}
	}

	.v-shop-cart {

		// border-bottom: 2rpx solid #f7f7f7;

		image {
			width: 140rpx;
			height: 140rpx;
			margin-right: 20rpx;
		}

		.v-content {
			.v-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			text {
				color: #8f8f8f;
				// padding: 10rpx 0;
				padding: 10rpx 0 16rpx;
			}

			.v-price {
				color: #FF0000;
				font-size: 28rpx;
			}

			.groupBuying {
				min-width: 110rpx;
				height: 40rpx;
				padding: 10rpx;
				border-radius: 12rpx;
				color: #fff;
				background: rgb(255, 0, 0);
			}

			.viewOrder {
				color: #666666;
				border-radius: 12rpx;
				width: 132rpx;
				font-size: 26rpx;
				height: 52rpx;
				background: rgb(245, 245, 245);
			}
		}
	}

	.tabSwitch {
		margin: 0 75rpx;
		height: 68rpx;
		border-radius: 176rpx;

		background: #EDEDED;

		.activeBtn {
			padding: 0 20rpx;
			width: 150rpx;
			height: 68rpx;
			border-radius: 158rpx;

			background: rgb(255, 255, 255);
		}

		.transitionBtn {
			padding: 0 20rpx;
			width: 150rpx;
			height: 68rpx;
			border-radius: 158rpx;

			// background: rgb(255, 255, 255);
		}
	}
</style>